<template>
  <div id="HeadNav">
    <div class="Headmin">
      <a href="#"><img src="https://cp1.douguo.com/static/nweb/images/logo3.png?20191218" alt=""></a>
      <ul class="nav">
        <li>
          <router-link to="/HeadNav/Home">首页</router-link>
        </li>
        <li>
          <router-link to="/HeadNav/Recipe/Choiceness"  active-class="active">菜谱</router-link>
        </li>
        <li>
          <router-link to="/HeadNav/ShoppingCenter" active-class="active">商城</router-link>
        </li>
      </ul>
      <div class="SearchMenu">
        <el-input placeholder="搜索菜谱、食材、用户" v-model="searchmessage">
          <el-button slot="append"  class="searchicon" @click="search"><i  class="el-icon-search"></i></el-button>
        </el-input>
        <el-button class="publish">发布</el-button>
      </div>
      <div class="heading">
        <el-avatar icon="el-icon-user-solid"></el-avatar>
      </div>

    </div>
    <router-view></router-view>
  </div>
</template>
<script>
// import LoginVue from '../Login.vue'
export default {
  name: 'HeadNav',
  data () {
    return {
      searchmessage: ''
    }
  },
  methods: {
    search () {
      const searchmessage = this.searchmessage
      console.log(searchmessage)
      // window.localStorage.setItem('searchmessage', this.searchmessage)
      // const skipArr = 'http://localhost:8080/HeadNav' + '/Search'
      // window.location.href = skipArr
    }
  }
}
</script>
<style lang="less" scoped>

  .active{
    color: #FFB31A !important;
  }
#HeadNav {
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15) !important;
  //position: fixed;
  //top: 0;
  //left: 0;
  width: 100%;
  z-index: 99;
  background: #fff;
  height: 60px;

  .Headmin {
    width: 1000px;
    height: 60px;
    margin: 0 auto;
    display: flex;
    align-items: center;

    a {
      height: 30px;
      float: left;
      color: #333;
      text-decoration: none;

      img {
        height: 30px;
      }
    }

    .nav {
      display: flex;
      margin-left: 20px;
      list-style: none;
      height: 100%;
      align-items: center;
      justify-content: left;
      cursor: pointer;

      li {
        float: left;
        height: 100%;
        font-size: 15px;
        color: #333;
        padding: 0 12px;
        line-height: 60px;
      }
    }

    .SearchMenu {
      float: left;
      margin-left: 160px;

      .el-input {
        width: 230px;
        outline: none;
      }

      .publish {
        margin-left: 12px;
        padding: 7px 12px;
        background-color: #FFB31A;
        outline: none;
        color: #fff;
        text-align: center;
      }
    }

  }
}

.heading {
  width: 48px;
  height: 48px;
  background-color: aquamarine;
  float: right;
  margin-left: 180px;
  border-radius: 50%;

  .el-avatar {
    width: 100%;
    height: 100%;
    line-height: 48px;
    font-size: 26px;
    cursor: pointer;
  }
}

.searchicon {
  padding: 0 6px;
  cursor: pointer;
  i{
margin-left: 4px;
    font-size: 18px;
    margin-top: 12px
  }

}
</style>
